<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Customers List</title>
    <%= javascript_include_tag "/javascripts/ext/GroupSummary.js" %>
  </head>
  <body>
    <table width="200" border="0">
      <tr>
        <td>
          <select name="customertype" id="customertype">
            <option value="all">所有</option>
            <option value="customer">一般客户</option>
            <option value="passenger">常旅客</option>
            <option value="linkman">联系人</option>
          </select>
        </td>
        <td>
          <input type="text" name="searchkey" id="searchkey" />
        </td>
        <td>
          <input name="搜索" value="搜索" type="button" onclick="search()"/>
        </td>
      </tr>
    </table>
    <div id="ordersgrid" style="height:280px;" class="x-form-item">
    </div>
    <br>
    <script>
        //package("trailblazer.user");
        //package("feyaSoft.demouser");
        //Ext.namespace("trailblazer.user");
        /*
         * Ext JS Library 2.0.2
         * Copyright(c) 2006-2008, Ext JS, LLC.
         * licensing@extjs.com
         *
         * http://extjs.com/license
         */
        //为了一般JS方法可以调用，这个变量定义要放在onReady外面．
        var orderDS;
        Ext.onReady(function(){
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            // fix the bug in codepress - resize
            //Ext.BoxComponent.prototype.setSize('100%', '125px');

            /************************************************************
             * Display the result in page
             * the column model has information about grid columns
             * dataIndex maps the column to the specific data field in
             * the data store (created below)
             ************************************************************/
            Ext.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
                return v + (record.data.estimate * record.data.rate);
            }
            var summary = new Ext.grid.GroupSummary();
            var orderCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 50,
                    //hidden: true,
                    summaryType: 'count',
                    hideable: false,
                    summaryRenderer: function(v, params, data){
                        return ((v == 0 || v > 1) ? '(' + v + ' Tasks)' : '(1 Task)');
                    }
                }, {
                    header: '订单编号',
                    dataIndex: 'order_no',
                    width: 115
                }, {
                    header: 'PNR',
                    dataIndex: 'pnr',
                    width: 60
                }, {
                    header: '客户名称',
                    dataIndex: 'customer',
                    width: 70
                }, {
                    header: '订单状态',
                    dataIndex: 'status',
                    width: 60
                }, {
                    header: '总金额',
                    dataIndex: 'price_sum',
                    summaryType:'sum',
                    renderer: Ext.util.Format.usMoney,
                    width: 60
                }, {
                    header: '乘机日期',
                    dataIndex: 'fly_date',
                    width: 70
                }, {
                    header: '起飞时间',
                    dataIndex: 'fly_time',
                    width: 60
                }, {
                    header: '送票地址',
                    dataIndex: 'send_address',
                    width: 120
                }, {
                    header: '联系人',
                    dataIndex: 'link_man',
                    width: 70
                }, {
                    header: '联系电话',
                    dataIndex: 'link_tel',
                    width: 90
                }, {
                    header: '预定人',
                    dataIndex: 'creator',
                    width: 70
                }, {
                    header: '预定时间',
                    dataIndex: 'created_at',
                    width: 120,
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i')
                }, {
                    header: '出票人',
                    dataIndex: 'ticket_outer',
                    width: 70,
                    hidden: true
                }, {
                    header: '出票时间',
                    dataIndex: 'ticket_out_date',
                    width: 110,
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i'),
                    hidden: true
                }, {
                    header: '送票人',
                    dataIndex: 'sender',
                    width: 70,
                    hidden: true
                }, {
                    header: '送票时间',
                    dataIndex: 'send_date',
                    width: 70,
                    hidden: true
                }, {
                    header: '收款人',
                    dataIndex: 'cash_checker',
                    width: 70,
                    hidden: true
                }, {
                    header: '收款时间',
                    dataIndex: 'cash_get_date',
                    width: 110,
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i'),
                    hidden: true
                }, {
                    header: '客户要求',
                    dataIndex: 'order_request',
                    width: 120

                }]);

            /************************************************************
             * connect to backend - grid - core part
             * create the Data Store
             *   connect with backend and list the result in page
             *   through JSON format
             ************************************************************/
            orderDS = new Ext.data.GroupingStore({
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.HttpProxy({
                    url: '/customers/getOrdersByCustomer'
                }),
                groupField: 'customer',
                groupOnSort: true,
                sortInfo: {
                    field: 'customer',
                    direction: "ASC"
                }, //使用GroupingStore时必须指定sortInfo信息
                // create reader that reads the Topic records
                reader: new Ext.data.JsonReader({
                    root: 'root',
                    totalProperty: 'totalProperty',
                    id: 'id'
                }, [{
                        name: 'id'
                    }, {
                        name: 'order_no'
                    }, {
                        name: 'pnr'
                    }, {
                        name: 'status'
                    }, {
                        name: 'fly_date'
                    }, {
                        name: 'fly_time'
                    }, {
                        name: 'customer',
                        mapping: 'customer.name'
                    }, {
                        name: 'creator',
                        mapping: 'creator.user_name'
                    }, {
                        name: 'link_man'
                    }, {
                        name: 'link_tel'
                    }, {
                        name: 'price_sum'
                    }, {
                        name: 'send_address'
                    }, {
                        name: 'created_at'
                    }, {
                        name: 'ticket_outer',
                        mapping: 'ticket_outer.user_name'
                    }, {
                        name: 'ticket_out_date'
                    }, {
                        name: 'printer',
                        mapping: 'printer.user_name'
                    }, {
                        name: 'affirm_date'
                    }, {
                        name: 'sender',
                        mapping: 'sender.user_name'
                    }, {
                        name: 'send_date'
                    }, {
                        name: 'cash_checker',
                        mapping: 'cash_checker.user_name'
                    }, {
                        name: 'cash_get_date'
                    }, {
                        name: 'order_request'
                    }])
            });


            /************************************************************
             * add a paging toolbar to the grid's footer
             ************************************************************/
            var myPagingToolbar = new Ext.PagingToolbar({
                pageSize: 10,
                displayInfo: true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: "没有记录",
                store: orderDS
            });

            /************************************************************
             * define grid panel now
             ************************************************************/
            var orderGridPanel = new Ext.grid.GridPanel({
                border: false,
                el: 'ordersgrid',
                ds: orderDS,
                cm: orderCM,
                view: new Ext.grid.GroupingView({
                    forceFit: true,
                    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
                    showGroupName: false,
                    enableNoGroups: false, // REQUIRED!
                    hideGroupedColumn: true
                }),
                autoWidth: true,
                plugins: summary,
                //frame: true,
                //width: 1300,
                height: 600,
                collapsible: true,
                animCollapse: false,
                title: '客户列表',
                iconCls: 'icon-grid',
                loadMask: true,
                bbar: myPagingToolbar
            });

            //panel render
            orderGridPanel.render();
            // trigger the data store load
            orderDS.load({
                params: {
                    start: 0,
                    limit: 10
                }
            });

            /************************************************************
             * Action - edit
             *   handle double click
             *   user select one of the item and want to update it
             ************************************************************/
            orderGridPanel.on('rowdblclick', function(orderGridPanel, rowIndex, e){
                var selectedId = orderDS.data.items[rowIndex].id;
                passengerDS.baseParams.customer_id = selectedId;
                passengerDS.load();
            });
        });
    </script>
  </body>
</html>
